import React, {useState} from "react";
import {Center, Image, Text, View} from "native-base";
import {Platform, StyleSheet, TouchableHighlight, TouchableOpacity} from "react-native";

export const NewHeader = ({msg, navigation}) => {
    const [show, setShow] = useState(true);
    function _show() {
        setShow(!show);
    }
    return <View style={{marginBottom: 20}}>
        <View style={styles.header}>
            {/*文字前面的黑色正方形*/}
            <View style={styles.bold}></View>
            {/*文字*/}
            <Center _text={{fontSize:20}}>
                {msg.name}
            </Center>
            {/*展开收起*/}
            <TouchableOpacity style={{flex:1}} onPress={()=>{_show()}}>
                {show&&<Text style={{textAlign:'right',lineHeight:30,color:'#0096c7'}}>收起</Text>}
                {!show&&<Text style={{textAlign:'right',lineHeight:30,color:'#0096c7'}}>展开</Text>}
            </TouchableOpacity>
        </View>
        {/*内容*/}
        {
            show&&
            <View style={styles.content}>
                {
                    msg.content.laiyuan.map((item,index)=>{
                        return (
                            <TouchableHighlight onPress={() => {
                                navigation.navigate('ShowOneImg', {
                                    img: msg.content.photo1[index].trim()
                                })
                            }}>
                                <View style={styles.Vessels} key={index}>
                                    {/*图片*/}
                                    <View style={styles.imgVessels}>
                                        <Image style={styles.img} source={{
                                            uri: (Platform.OS==='android'||(Platform.Os==="iOS"&&Platform.Version>14))
                                                ?`${msg.content.photo1[index].trim()}?imageView2/0/format/webp/interlace/1/q/1`
                                                :`${msg.content.photo1[index].trim()}`,isStatic: true
                                        }} fallbackSource={require('../../assets/error.webp')} alt="123" resizeMethod="resize"
                                        />
                                    </View>
                                    <View style={styles.introduce}>
                                        <Text style={styles.introduceText} numberOfLines={5}>{msg.content.laiyuan[index]}</Text>
                                    </View>
                                    <View style={styles.laiyuan}>
                                        <Text style={styles.laiyuanText}>{msg.name}</Text>
                                    </View>
                                    <View style={styles.user}>
                                        <Text style={styles.userText}>{msg.content.zuozhe[index]}</Text>
                                    </View>
                                </View>
                            </TouchableHighlight>
                        );
                    })
                }
            </View>
        }
        {
            !show&&null
        }
    </View>
}

const styles=StyleSheet.create({
    header:{
        flexDirection:'row',
    },
    bold:{
        width:10,
        height:20,
        backgroundColor:'#696969',
        marginTop:5,
        marginRight:10
    },
    content:{

    },
    Vessels:{
        width: '100%',
        height: 120,
        borderColor:'#eaeaea',
        borderWidth:1,
        marginTop: 10,
        borderRadius:5,
        position:'relative',
        paddingLeft:120,
        paddingTop:10,
        paddingBottom:10
    },
    imgVessels:{
        width:100,
        height:'100%',
        position: 'absolute',
        top:10,
        left:10,
        // backgroundColor: 'red',
        borderLeftWidth:1,
        borderRightWidth:1,
        borderColor: '#9d9d9d'
    },
    img:{
        width:'100%',
        height:'100%'
    },
    introduce:{
        width:'100%',
        height:50,
    },
    introduceText:{
        fontSize: 20,
        lineHeight:50,
        fontWeight:'500'
    },
    laiyuan:{

    },
    user:{

    },
    laiyuanText:{

    },
    userText:{
        color:'#c4c4c4'
    },
})